<template>
  <el-tooltip
    :content="txtInfo"
    placement="top"
    effect="light"
    :disabled="isDisabled"
    popper-class="tooltip"
  >
    <div
      class="wordnowrap"
      :class="{ isLink: 'link-text' }"
      @mouseenter="isShowTooltip"
      @mouseleave="hover"
      @click="linkTo"
    >
      {{ txtInfo }}
    </div>
  </el-tooltip>
</template>
 
<script>
export default {
  name: "ShowTooltips",
  props: {
    txtInfo: "",
    isLink: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      isDisabled: false,
    };
  },
  methods: {
    hover(e) {
      e.target.classList.remove("hover-blue");
    },
    isShowTooltip(e) {
      let clientWidth = e.target.clientWidth,
        scrollWidth = e.target.scrollWidth,
        arrList = Array.from(e.target.classList);
      e.target.classList.add("hover-blue");
      if (scrollWidth > clientWidth) {
        this.isDisabled = false;
      } else {
        this.isDisabled = true;
      }
    },
    linkTo() {
      if (this.isLink) {
        this.$emit("linkTo");
      }
    },
  },
};
</script>
 
<style>
/* 箭头 */
.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  border-top-color: rgb(255, 255, 255) !important;
}
/* 箭头 */
.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
  border-top-color: rgb(255, 255, 255) !important;
}
/* 内容 */
.tooltip {
  background: rgb(255, 255, 255) !important;
  /* background: rgb(255, 255, 255) !important;   */
  box-shadow: 1px 1px 10px 3px #d3d3d6;
  color: rgb(0, 0, 0);
  border: 0px solid white !important;
  outline: none;
  max-width: 400px !important;
}
.wordnowrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* border: 1px solid #dcdfe6; */
  /* transition: 0.4s ease-in; */
}

/* .hover-blue {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
} */
</style>  